<template>
    <div>
        <div class="big-box">
            <div class="small-box"></div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "flex"
    }
</script>

<style scoped lang="less">
.big-box{
    display: flex;
    align-items: center;
   justify-content: center;
    width: 300px;
    height: 300px;
    border: 1px solid red;
    .small-box{
        width: 50px;
        height: 50px;
        background-color: green;
    }
}
</style>